<template>
  <div class="other-type">
    <div class="other-type-item" v-for="typeItem in types" :class="{
      'other-type-item--active':
        state.other.otherType == typeItem.value && match.match_id == state.other.match?.match_id,
    }" :style="otherstyle(typeItem.value)" @click="store.selectOther(typeItem, match)">
      <div class="other-type-item__label">
        {{ typeItem.label }}
      </div>
      <div class="other-type-item__icon">
        <el-icon>
          <CaretBottom />
        </el-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
const emtis = defineEmits('change')
const props = defineProps({
  match: Object,
})

const { store, state } = inject('Sell')

const types = [
  // { label: '详情', value: 'RQ' },
  { label: '让球&大/小', value: 'RQ' },
  { label: '角球', value: 'JQ' },
  // { label: '罚牌', value: 'FP' },
]

const otherstyle = value => {
  let a = ''
  // if (value == 'RQ' && props.match.additive_odds_count.main <= 0) {
  //   a = 'display: none;'
  // }
  if (value == 'JQ' && props.match.additive_odds_count.corner <= 0) {
    a = 'display: none;'
  }
  if (value == 'FP' && props.match.additive_odds_count.pcard <= 0) {
    a = 'display: none;'
  }
  if (value == 'RQ' && (props.match.additive_odds_count.main <= 0 && props.match.sport_type == 'soccer') || (props.match.additive_odds_count.more <= 0 && props.match.sport_type == 'basketball')) {
    a = 'display: none;'
  }
  return a
}
</script>
<style lang="scss" scoped>
.other-type {
  display: flex;
}

.other-type-item {
  padding: 4px 8px;
  border-radius: 14px;
  background-color: #f5f5f5;
  margin-right: 8px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.other-type-item--active {
  background-color: var(--primary);
  color: #fff;
}
</style>
